<template>
  <div class="progress">
    <text :style="setCircle()"></text>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    /**
     * 进度圈svg大小
     */
    setCircleStyle(width) {
      return `width: ${width}px;
				height: ${width}px;
				fontSize: ${width * 0.15 + 6}px;`;
    },
    /**
     * 绘制圈
     */
    setCirclePath(strokeWidth) {
      const radius = 50 - strokeWidth / 2;
      let beginPositionX = 0;
      let beginPositionY = -radius;
      let endPositionX = 0;
      let endPositionY = -2 * radius;
      return `M 50,50 m ${beginPositionX},${beginPositionY} a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY} a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
    },
    /**
     * 非H5端，绘制进度圈svg转base URL
     */
    setCircle(setProgress = 10, width = 50, strokeWidth = 6) {
      const radius = 50 - strokeWidth / 2;
      const len = Math.PI * 2 * radius;
      const gapDeg = 0;
      let currentColor = "#1ed4ae";
      let svgToBase = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' class='cmd-progress-circle'%3E%3Cpath d='${this.setCirclePath(
        strokeWidth
      )}' stroke='%23f3f3f3' stroke-linecap='round' stroke-width='${strokeWidth}' fill-opacity='0' class='cmd-progress-circle-trail' style='stroke-dasharray: ${len -
        (gapDeg || 0)}px, ${len}px;stroke-dashoffset: -${(gapDeg || 0) /
        2}px;transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s;'%3E%3C/path%3E%3Cpath  d='${this.setCirclePath(
        strokeWidth
      )}' stroke-linecap='round' stroke-width='${strokeWidth}' fill-opacity='0' class='cmd-progress-circle-path' style='stroke: ${currentColor};stroke-dasharray: ${(setProgress /
        100) *
        (len - (gapDeg || 0))}px, ${len}px;stroke-dashoffset: -${(gapDeg || 0) /
        2}px;transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s, stroke-width 0.06s ease 0.3s;'%3E%3C/path%3E%3C/svg%3E`;
      return `background-image: url("${svgToBase}");
				background-size: cover;
				display: inline-block;
				${this.setCircleStyle(width)}`;
    }
  }
};
</script>
<style lang="scss">
</style>
